<template>
  <div class="ptgimg">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>车牌识别</el-breadcrumb-item>
      <el-breadcrumb-item>图片识别</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box_card">
      <!-- 顶部按钮区域 -->
      <el-row :gutter="20">
        <el-col :span="3">
          <el-button
            type="primary"
            :loading="btnloading"
            @click="addplateimg()"
            :disabled="isbled"
            >{{ btntxt }}</el-button
          >
        </el-col>
        <el-col :span="3">
          <el-link type="primary" disabled>目前仅训练了蓝牌数据，只能识别蓝牌</el-link>
        </el-col>
      </el-row>
      <div class="box">
        <div class="left">
          <input
            type="file"
            class="imglistfile"
            accept="image/*"
            ref="fileRef"
            @change="handleFileUpload"
          />
          <img :src="listimg" alt @click="simcilck()" />
        </div>
        <div class="right">
          <el-image
            
            :src="plateimg + '?t=' + Date.now()"
            :preview-src-list="srcList"
            class="rus1"
            v-if="plateimg !== null"
          >
          </el-image>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      filesrc: null, //图片文件url
      listimg: require("@/assets/images/load.png/"), //上传图
      plateimg: null, //结果车牌图片
      srcList: [], //图片列表
      btntxt: "开始识别", //按钮文本
      btnloading: false, //按钮加载状态
      isbled: false, //按钮是否禁用
    };
  },
  methods: {
    addplateimg() {
      if (this.filesrc == null) return this.$message.warning("请先上传图片");
      var formData = new FormData(); // 创建 FormData 对象
      //添加数据到FormData，模拟表单数据
      formData.append("file", this.filesrc); // 添加文件到 FormData
      this.$postapi("/car_info/plateimg/add", formData, "form")
        .then((res) => {
          if (res.code == 200) {
            this.platesib(); //调用车牌识别
          } else if (res.code == 404) {
            this.$message.warning(res.msg);
          } else {
            this.$message.error(res.msg);
            this.cleardata();
          }
        })
        .catch((error) => {
          this.$message.error(error);
          this.cleardata();
        });
    },
    // 进行车牌识别
    platesib() {
      this.btnstate('true')
      this.$postapi("/car_info/add")
        .then((res) => {
          this.btnstate('false')
          if (res.code == 200) {
            this.plateimg = res.plateimg;
            this.srcList.push(res.plateimg);
            this.$message.success(res.msg);
          } else if (res.code == 404) {
            this.$message.warning(res.msg);
            this.plateimg = res.plateimg;
            this.srcList.push(res.plateimg);
          } else {
            this.$message.error(res.msg);
            this.cleardata();
          }
        })
        .catch((error) => {
          this.$message.error(error);
          this.cleardata();
        });
    },
    // 按钮状态
    btnstate(state) {
      if (state == "true") {
        this.btnloading = true;
        this.btntxt = "识别中...";
        this.isbled = true;
      } else {
        this.btnloading = false;
        this.btntxt = "开始识别";
        this.isbled = false;
      }
    },
    // 重置原图,将图片地址置空
    cleardata() {
      this.filesrc = null; //将图片地址置空
      this.listimg = require("@/assets/images/load.png/"); //重置原图
      this.plateimg = null;
    },
    //文件框发生改变赋予新的图片路径
    handleFileUpload(event) {
      this.filesrc = event.target.files[0]; // 获取选择的文件
      this.listimg = URL.createObjectURL(this.filesrc);
    },
    // 点击上传图片模拟点击
    simcilck() {
      this.$refs.fileRef.click();
      this.plateimg=null
      this.cleardata();
    },
  },
};
</script>

<style lang="less" scoped>
.ptgimg {
  .box_card {
    margin-top: 20px;
    .box {
      display: flex;
      margin-top: 20px;
      overflow: auto;
      width: 100%;
      height: 500px;
      .left {
        width: 500px;
        height: 500px;
        .imglistfile {
          float: left;
          visibility: hidden;
        }
        img {
          width: 90%;
          height: 90%;
          border: 2px solid #ccc;
          border-radius: 6px;
          cursor: pointer;
          object-fit: cover;
        }
      }
      .right {
        flex: 1;
        margin-left: 100px;
        margin-top: 25px;
        .rus1{
           object-fit: cover;
        }
      }
    }
  }
}
</style>